<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="harbor-box">
        <div class="total-box">
            <span>风险港口总数</span>
            <span class="total">{{ total }} 个</span>
        </div>

        <div class="risk-box">
            <div class="item-box" v-for="(item, idx) in harborData" :key="idx">
                <div class="echart-box">
                    <div class="echart" :id="'harbor-echart' + idx"></div>
                    <div class="round"></div>
                </div>
                <div class="title">{{ item.name }}</div>
            </div>
        </div>

        <div class="table-box">
            <a-table
                class="risk-table"
                :columns="columns"
                :data-source="data"
                :pagination="false"
                :scroll="{ y: 100 }"
                virtual
            ></a-table>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

const total = 55; // 港口总数
const harborData = [
    {
        type: "high",
        name: "高风险",
        number: "19",
    },
    {
        type: "higher",
        name: "较高风险",
        number: "19",
    },
    {
        type: "medium",
        name: "中风险",
        number: "1",
    },
    {
        type: "lower",
        name: "较低风险",
        number: "1",
    },
    {
        type: "low",
        name: "低风险",
        number: "15",
    },
]; // 风险数据
let myChart;

const initBuild = () => {
    harborData.forEach((item, idx) => {
        myChart = echarts.init(document.getElementById("harbor-echart" + idx));

        const option = {
            series: [
                {
                    type: "pie",
                    radius: ["85%", "95%"],
                    avoidLabelOverlap: false,
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: "bold",
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    backgroundColor: "#fff",
                    data: [
                        {
                            value: item.number,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#21CD99",
                                        },
                                        {
                                            offset: 1,
                                            color: "#FFF2A8",
                                        },
                                    ]
                                ),
                            },
                        },
                        {
                            value: total - item.number,
                            itemStyle: {
                                color: "rgba(0, 0, 0, 0)",
                            },
                        },
                    ],
                },
                {
                    type: "pie",
                    radius: ["80%", "100%"],
                    avoidLabelOverlap: false,
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: "bold",
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    backgroundColor: "#fff",
                    data: [
                        {
                            value: total,
                            itemStyle: {
                                color: "rgba(255, 255, 255, 0.1)",
                            },
                        },
                    ],
                },
            ],
        };
        myChart.setOption(option);
    });
};

onMounted(() => {
    initBuild();
});

const columns = [
    {
        title: "港口",
        dataIndex: "name",
        ellipsis: true,
    },
    {
        title: "港区",
        dataIndex: "age",
        ellipsis: true,
    },
    {
        title: "类型",
        dataIndex: "address",
        ellipsis: true,
    },
    {
        title: "气象",
        dataIndex: "department",
        ellipsis: true,
    },
    {
        title: "风险",
        dataIndex: "type",
        ellipsis: true,
    },
];
const data = [
    {
        key: "1",
        name: "2011",
        age: 19,
        address: "李明",
        department: "平台部",
        type: "高风险",
    },
    {
        key: "2",
        name: "2015",
        age: 19,
        address: "杨波",
        department: "低风险",
        type: "低风险",
    },
    {
        key: "3",
        name: "2023",
        age: 1,
        address: "朱伟",
        department: "较低风险",
        type: "较低风险",
    },
    {
        key: "3",
        name: "2023",
        age: 1,
        address: "朱伟",
        department: "较高风险",
        type: "较高风险",
    },
    {
        key: "3",
        name: "2023",
        age: 15,
        address: "朱伟",
        department: "中风险",
        type: "中风险",
    },
];
</script>

<style scoped lang="less">
.harbor-box {
    padding: 16px;
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    .total-box {
        display: flex;
        justify-content: space-between;
        margin: 0 0 12px;
        padding: 0 14px 0 8px;
        width: 100%;
        height: 27px;
        line-height: 27px;
        // background: url("@/assets/images/item-header.png");
        background-size: 100% 100%;
        .total {
            font-family: Impact;
            font-size: 15px;
            background: linear-gradient(180deg, #ffffff 21%, #b2b2b2 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            text-shadow: 0px 1.5px 21.5px rgba(0, 0, 0, 0.5);
        }
    }
    .risk-box {
        display: flex;
        align-items: center;
        width: 100%;
        .item-box {
            flex: 1;
            margin-bottom: 12px;
            width: calc(20% - 16px);
            .echart-box {
                position: relative;

                .echart {
                    margin-bottom: 4px;
                    width: 100%;
                    height: 76px;
                }

                .round {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    width: 53px;
                    height: 53px;
                    background: linear-gradient(
                        rgba(255, 255, 255, 0.2),
                        transparent
                    );
                    border-radius: 50%;
                }
            }

            .title {
                position: relative;
                margin: auto;
                width: 68px;
                height: 26px;
                line-height: 26px;
                font-size: 14px;
                color: #fff;
                text-align: center;
                border-radius: 3px;
                background: linear-gradient(
                    0deg,
                    rgba(0, 0, 0, 0.4012) 0%,
                    rgba(106, 185, 253, 0.2847) 100%
                );
                box-sizing: border-box;
                border: 0.63px solid;
                border-image: linear-gradient(
                    292deg,
                    rgba(0, 153, 255, 0) 2%,
                    #24dcff 45%,
                    rgba(36, 220, 255, 0) 98%
                );
                box-shadow: 0px 0.63px 0.63px 0px rgba(0, 0, 0, 0.2476);

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    margin: auto;
                    width: 12px;
                    height: 2px;
                    background: #fffbca;
                    content: "";
                }
            }
        }
    }
    .table-box {
        :deep(.risk-table) {
            .ant-table {
                background: none;
            }

            .ant-table-body table {
                border-spacing: 0 4px;
            }

            .ant-table-header {
                margin-bottom: -4px;
            }
            ::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }

            .ant-table-cell-scrollbar {
                box-shadow: none;
            }

            ::-webkit-scrollbar-thumb {
                border-radius: 5px;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: rgba(0, 0, 0, 0.2);
            }

            .ant-table-thead > tr > th,
            .ant-table-tbody > tr > td,
            .ant-table tfoot > tr > th,
            .ant-table tfoot > tr > td {
                padding: 9px 16px;
                color: #fff;
                border: none;
            }
            .ant-table-thead > tr > th {
                background: rgba(82, 208, 255, 0.2);
                border-top: 1px dashed rgba(255, 255, 255, 0.4);
                border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
            }
            .ant-table-tbody > tr > td {
                border-top: 1px dashed rgba(255, 255, 255, 0.4);
                border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
            }
            .ant-table-tbody > tr > td {
                background: rgba(82, 208, 255, 0.1);
            }
            .ant-table-tbody > tr:hover {
                background: rgba(82, 208, 255, 0.2);
            }
            .ant-table-thead
                > tr
                > th:not(:last-child):not(.ant-table-selection-column):not(
                    .ant-table-row-expand-icon-cell
                ):not([colspan])::before {
                height: 0;
            }
        }
    }
}
</style>